<template>
	<!-- <s-layout navbar="normal" :bgStyle="{ color: '#ffffff' }" subarbg="true" :selffixed="false"> -->
	<s-layout navbar="normal" :bgStyle="{ color: '#ffffff' }">
		<view class="calendar-content" style="z-index:99999 !important">
			<uni-calendar ref="calendar" class="uni-calendar--hook"  :insert="true"
				:lunar="state.info.lunar" 
				:startDate="state.info.startDate" 
				:endDate="state.info.endDate" 
				:selected = "state.info.selected"
				@confirm="confirm" @change="change" />
		</view>
		<view class="space"></view>
		<view class="zhibo-content">
			<s-empty v-if="state.todaylist.length === 0" icon="/static/goods-empty.png" paddingTop="0" text="暂无直播">
			</s-empty>
			<uni-section title="今日直播" type="line"  v-if="state.todaylist.length > 0"></uni-section>
			<view class="ss-m-t-10 zhibo" v-if="state.todaylist.length > 0" v-for="item in state.todaylist"
				:key="item.id" @tap="navigatorToZhibo(item)">
				<view class="icon">
					<button class="ss-reset-button zhibo-btn" v-if="item.live_set_status==1">待直播</button>
					<button class="ss-reset-button zhibo-btn playing" 
					v-else-if="item.live_set_status==2" >
						即将直播
					</button>
					<button class="ss-reset-button zhibo-btn playing" 
					v-else-if="item.live_set_status==3">
						直播中
					</button>
					<button class="ss-reset-button zhibo-btn" v-else-if="item.live_set_status==0">
						已结束
					</button>
				</view>
				<view>
					<view class="course-title">{{item.lesson_name}}</view>
					<view class="course-msg">
						<span v-if="item.live_set_status==2 ||item.live_set_status==3"> 开播时间 {{ timeSubstring(item.start_time) }}</span>
						<span v-else> 开播时间 {{ item.start_time }}</span>
						<span>{{item.teacher_name || "计划社名师"}}</span></view>
				</view>
			</view>
		</view>
	</s-layout>
</template>


<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import {
		isEmpty
	} from 'lodash';


	// 数据
	const state = reactive({
		today: '',
		orderList: [],
		learnrecord: [],
		todaylist: [],
		info: {
			lunar: false,
			range: false,
			insert: false,
			startDate: '2025-01-01',
			endDate: '2025-12-31',
			selected: [{date: '2025-03-07', info: '直播'}]
		}
	});
  function timeSubstring(timestr){
    return timestr.substring(11);
  }
	onLoad(async (options) => {
		getTodayLive();
		getUserAllLiveCourse();
	});

	async function getUserAllLiveCourse(){
		let res = await sheep.$api.course.getUserAllLiveCourse({
			
		});
		if (res.code === 1) {
			state.info.selected = res.data;
		}
	}
	
	async function getTodayLive() {
		let res = await sheep.$api.course.getTodayLiveCourse({
			today: state.today,
		});
		if (res.code === 1) {
			state.todaylist = res.data;
		}
	}

	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}

	function change(e) {
		console.log('change 返回:', e)
		console.log(e.fulldate)
		state.today = e.fulldate
		getTodayLive();
	}
	
	function confirm(e) {
		console.log('confirm 返回:', e)
	}
	
	//跳转观看页面
	function navigatorToZhibo(lesson) {	
		let params = {
			id: lesson.goods_id
		};
		if(lesson.live_set_status==0){
			if(lesson.ccRecordId==''){
				sheep.$helper.toast('回放视频上传中')
			}else{
				params.recordId = lesson.id;
				sheep.$router.go('/pages/course/huifang', params)
			}
		}
		if(lesson.live_set_status==2 || lesson.live_set_status==3){
				 
			if (lesson.content_type === 'zhibo') {
				params.lesson_id = lesson.id;
			}
			sheep.$router.go('/pages/course/zhibo', params)
		}
	}
	
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";
	
	.space{width:100%;height:12px;background-color: #f2f2f2;}
	 :deep() {
		 .uni-navbar--fixed{max-width:120px;}
	 }
	
	.zhibo-content {
		background-color: #FFF;
		margin-bottom: 10px;
		padding-bottom: 12px;

		.zhibo {
			display: flex;
			padding: 8px;
		}

		.zhibo .icon {
			width: 66px;
			margin-top: 4px;
		}

		.course-title {
			line-height: 20px;
			padding-bottom: 5px;
		}

		.course-msg {
			color: #999999;
			font-size: 24rpx;
			margin-top: 4px;
		}

		.course-msg span {
			border: 1px solid #e1e1e1;
			margin-right: 8px;
			font-size: 20rpx;
			padding: 2px 4px;
			border-radius: 3px;
		}
	}

	.zhibo-btn {
		width: 100rpx;
		height: 30rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		background: #eeeeee;
		color: #888888;
	}

	.zhibo .playing {
		background-color: var(--ui-BG-Main);
		color: #FFFFFF;
		height: 20px;
	}

	.tiku-card {
		margin: 10px 12px;
		display: flex;
	}

	.tiku-card .img {
		width: 48%;
	}

	.tiku-card .img uni-image {
		width: 100%
	}

	.goodsinfo {
		height: 120px;
		border-radius: 14px;
		margin: 12px;
		padding: 20px 15px 5px 15px;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 22px;
			align-items: center;
		}

		.firsttext {
			font-size: 24rpx;
			color: #999;
		}

		.item-shiting {
			width: 120rpx;
			height: 40rpx;
			font-weight: 500;
			font-size: 22rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;

		}
	}

	.youxiaoqi {
		font-size: 24rpx;
		color: #999999;
		padding-left: 10px;
	}

	.youxiaoqi span {
		color: #999999;
		font-size: 24rpx;
	}

	.ss-row-right {
		justify-content: flex-start;
	}

	.course-content {
		background-color: #FFFFFF;
		border-top-left-radius: 14px;
		border-top-right-radius: 14px;
		padding-top: 10px;
		padding-bottom: 10px;

		.line {
			width: 6rpx;
			height: 30rpx;
			background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
			border-radius: 3rpx;
		}

		.title {
			font-size: 30rpx;
			font-weight: bold;
			line-height: normal;
		}


	}

	.order-list-card-box {
		margin: 12px;
		border: 1px solid #eeeeee;
		padding: 10px 0px;
	}

	.coursebottom {
		display: flex;
		justify-content: space-between;

		.left {
			width: 70%;

		}

		.right {
			width: 25%;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
		}

		.courseinfo {
			font-size: 12px;
			color: #666666;
			padding: 20rpx;
		}

		.learn-btn {
			width: 114rpx;
			height: 40rpx;
			font-weight: 500;
			font-size: 24rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;
		}
	}


	.ss-order-card-warp {
		padding: 20rpx;

		.img-box {
			width: 184rpx;
			height: auto;
			border-radius: 10rpx;
			overflow: hidden;

			.order-img {
				width: 184rpx;
				height: auto;
			}
		}

		.box-right {
			flex: 1;
			position: relative;
		}

		.title-text {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
		}
	}

	:deep(.uni-tooltip-popup) {
		background: var(--ui-BG);
	}

	.warning-color {
		color: #faad14;
	}

	.danger-color {
		color: #ff3000;
	}

	.success-color {
		color: #52c41a;
	}

	.info-color {
		color: #999999;
	}
</style>